<template>
  <!--
  $event到底是啥?啥时候能.target：
   - 对于原生事件，$event就是事件对象 =====>能.target。
   - 对于自定义事件，$event就是触发事件时，所传递的数据==>不能.target。
 -->
  <!--  <input
    type="text"
    :value="modelValue"
    @input="emit('update:modelValue', (<HTMLInputElement>$event.target).value)"
  />
  <br />-->
  <input
    type="text"
    :value="ming"
    @input="emit('update:ming', (<HTMLInputElement>$event.target).value)"
  />
  <br />
  <input
    type="text"
    :value="mima"
    @input="emit('update:mima', (<HTMLInputElement>$event.target).value)"
  />
  <br />
</template>

<script setup lang="ts" name="AtguiguInput">
// 使用defineProps接收父组件的传参
defineProps(['modelValue', 'ming', 'mima'])

// 使用defineEmits接收父组件传递的自定义事件，其中update:modelValue、update:ming、update:mima都是自定义事件
const emit = defineEmits(['update:modelValue', 'update:ming', 'update:mima'])
</script>

<style scoped>
input {
  border: 2px solid black;
  background-image: linear-gradient(45deg, red, yellow, green);
  height: 30px;
  font-size: 20px;
  color: white;
}
</style>
